<template>
  <div>
    雷区宽度<el-input-number v-model="boomLength"></el-input-number>
    雷的数量<el-input-number v-model="boomNum"></el-input-number>
    打开雷数<el-input-number
      v-model="openedBoomsNum"
      disabled
    ></el-input-number>
    剩余标记<el-input-number v-model="signedLeft" disabled></el-input-number>
    <el-button @click="generate" type="success">生成一局</el-button>
    <div class="boom-group">
      <template v-for="(e, i) in cores">
        <div :key="i" class="boom-line">
          <template v-for="(cell, j) in e">
            <div :key="j" class="boom-cell">
              <boom-cell
                :ref="i"
                v-bind="cell"
                @closed-to-opened="closedToOpened"
                @closed-to-signed="closedToSigned"
                @signed-to-closed="signedToClosed"
                @opened-to-opened="openedToOpened"
                :disabled="isGameOver"
              ></boom-cell>
            </div>
          </template>
        </div>
      </template>
    </div>
  </div>
</template>
<script>
import BoomCell from "@/lab45/BoomCell";
/**
 * 页面核心数据结构体说明文档
 *
 *
 */
// import New from './components/New.vue';
export default {
  name: "SaoLei",
  components: {
    BoomCell,
    // New,Old,
  },
  props: {
    sampleP: {
      type: Number,
      default: 0,
    },
  },
  data() {
    return {
      sampleD: "value",
      cores: [
        [
          { value: 1, state: "closed", i: 1, j: 1 },
          { value: 1, state: "closed", i: 1, j: 1 },
          { value: 1, state: "closed", i: 1, j: 1 },
        ],
        [
          { value: 2, state: "closed", i: 1, j: 1 },
          { value: 3, state: "closed", i: 1, j: 1 },
          { value: 4, state: "closed", i: 1, j: 1 },
        ],
      ],
      boomLength: 8,
      boomNum: 6,
      openedBoomsNum: 0,
      isGameOver: false,
      signedNum: 0,
    };
  },
  computed: {
    // sampleC() {
    //     return this.sampleD+'--';
    // }
    signedLeft() {
      return this.boomNum - this.signedNum;
    },
  },
  created() {},
  mounted() {
    this.generate();
  },
  methods: {
    sampleM() {},
    generate() {
      //  初始化空棋盘
      let booms = [];
      for (let i = 0; i < this.boomLength; i++) {
        booms[i] = [];
        // booms.push([]);
        for (let j = 0; j < this.boomLength; j++) {
          booms[i][j] = {
            value: 0,
            state: "closed",
            i: i,
            j: j,
          };
        }
      }
      // console.log(booms);
      // 【0，6）
      //布雷 要求雷位置不重复
      let count = 0;
      while (count < this.boomNum) {
        let ip = Math.floor(Math.random() * this.boomLength);
        let jp = Math.floor(Math.random() * this.boomLength);
        if (booms[ip][jp].value !== 9) {
          booms[ip][jp].value = 9;
          count++;
        }
      }
      // console.log(booms);

      //  九宫格计数提示

      for (let i = 0; i < booms.length; i++) {
        for (let j = 0; j < booms.length; j++) {
          if (booms[i][j].value === 9) {
            continue;
          }

          //  九宫格
          let icount = 0;
          for (let k = -1; k <= 1; k++) {
            for (let l = -1; l <= 1; l++) {
              if (k === 0 && l === 0) {
                continue;
              }
              if (
                booms[i + k] &&
                booms[i + k][j + l] &&
                booms[i + k][j + l].value === 9
              ) {
                icount++;
              }
            }
          }
          booms[i][j].value = icount;
        }
      }

      this.cores = booms;

      this.init();
    },
    closedToSigned(i, j) {
      let cur = this.cores[i][j];
      cur.state = "signed";
      this.signedNum++;
    },
    signedToClosed(i, j) {
      let cur = this.cores[i][j];
      cur.state = "closed";
      this.signedNum--;
    },
    openedToOpened(i, j) {
      let cur = this.cores[i][j];
      cur.state = "opened";
      let aroundCount = 0;
      for (let k = -1; k <= 1; k++) {
        for (let l = -1; l <= 1; l++) {
          if (k === 0 && l === 0) {
            continue;
          }
          if (this.cores[i + k] && this.cores[i + k][j + l]) {
            if (this.cores[i + k][j + l].state === "signed") {
              aroundCount++;
            }
          }
        }
      }
      console.log(aroundCount);
      //如果标注数量等于雷数量
      if (aroundCount === cur.value) {
        for (let k = -1; k <= 1; k++) {
          for (let l = -1; l <= 1; l++) {
            if (k === 0 && l === 0) {
              continue;
            }
            //  八个中选择没有打开的状态按钮依次点击
            if (this.$refs[i + k] && this.$refs[i + k][j + l]) {
              let _curDom = this.$refs[i + k][j + l];
              if (_curDom.state === "closed") {
                setTimeout(() => {
                  this.$refs[i + k][j + l].closedToOpened();
                }, 150);
              }
            }
          }
        }
      }
    },
    closedToOpened(i, j) {
      let cur = this.cores[i][j];
      cur.state = "opened";

      //如果打开了雷区
      if (cur.value === 9) {
        this.gameFail();
        return;
      }
      this.openedBoomsNum++;
      if (this.openedBoomsNum + this.boomNum >= Math.pow(this.boomLength, 2)) {
        this.gameWin();
        return;
      }
      //帮助用户点击九宫格
      if (cur.value === 0) {
        for (let k = -1; k <= 1; k++) {
          for (let l = -1; l <= 1; l++) {
            if (k === 0 && l === 0) {
              continue;
            }
            //  八个按钮依次点击
            if (this.$refs[i + k] && this.$refs[i + k][j + l]) {
              let _curDom = this.$refs[i + k][j + l];
              if (_curDom.state === "closed") {
                setTimeout(() => {
                  this.$refs[i + k][j + l].closedToOpened();
                }, 100);
              }
            }
          }
        }
      }
    },
    gameWin() {
      this.$message.success("排雷完毕，游戏获胜");
      this.isGameOver = true;
    },
    gameFail() {
      this.$message.error("触发雷区，游戏结束");
      this.isGameOver = true;
    },
    init() {
      this.openedBoomsNum = 0;
      this.isGameOver = false;
      this.signedNum = 0;
    },
  },
  watch: {
    // sampleC(newValue, oldValue) {
    //
    // }
  },
};
</script>

<!--<style scoped>-->
<style lang="scss" scoped>
.boom-group {
  display: flex;
  flex-direction: column;
  .boom-line {
    padding: 2px;
    display: flex;
    flex-direction: row;
    .boom-cell {
      padding: 0 2px;
    }
  }
}
</style>
